<template>
	<view class="page_box">
		<view class="mask-loading" v-if="mask">
			<u-loading mode="circle" show size="60" color='#fb544c'></u-loading>
			<view class="" style="margin-top: 20rpx;">
				加载中...
			</view>
		</view>
		<view class="head_box">
			<!-- tab -->
			<view class="order-nav u-flex">
				<scroll-view scroll-x="true" class="scroll" :scroll-left="scrollLeft">
					<view class="nav-item u-flex-col u-col-center" v-for="nav in orderState" :key="nav.id"
						@tap="onNav(nav.type)">
						<view class="item-title">
							<view class="" :class="{ 'fontweight': orderType === nav.type }">
								{{ nav.title }}
							</view>
							<view :class="{ 'line-active': orderType === nav.type }">

							</view>
						</view>

						<!-- <text class="nav-line" :class="{ 'line-active': orderType === nav.type }"></text> -->
					</view>
				</scroll-view>

			</view>
		</view>

		<view class="content_box">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<!-- 订单列表 -->
				<view class="order-list" v-for="(order, orderIndex) in orderList" :key="order.id"
					@click.stop="jump('/pages/order/detail', { id: order.id })">
					<view class="order-head u-flex u-row-between">
						<text class="no">订单编号：{{ order.order_sn }}</text>
						<!-- <text class="state">{{ order.status_name }}</text> -->
					</view>
					<view class="goods-order" v-for="goods in order.item" :key="goods.id">
						<view class="order-content">
							<shopro-mini-card :title="goods.goods_title" :image="goods.goods_image">
								<template #describe>
									<view class="order-sku u-ellipsis-1">
										<view class="" style="margin-bottom: 12rpx;">
											规格:{{ goods.goods_sku_text ? goods.goods_sku_text : '' }}
										</view>
										<view class="" v-if='order.stages' style="margin-bottom: 12rpx;">
											租期:{{order.createtime_text}}--{{order.stages[order.stages.length-1].day}}
										</view>
										<text class="order-num">数量:{{ goods.goods_num || 0 }}</text>
									</view>
								</template>
								<template #cardBottom>
									<!-- <view class="order-price-box u-flex " v-if="false">
										<text class="order-price font-OPPOSANS">￥{{ goods.goods_price || 0 }}</text>
										<button class="u-reset-button status-btn"
											v-if="goods.status_name">{{ goods.status_name }}</button>
									</view> -->
								</template>
							</shopro-mini-card>
						</view>

						<view class="pass">
							<image :src="$BASE_URL+picList[4]" mode="aspectFill" style="width: 160rpx;height: 160rpx;"
								v-if="order.status ==2||order.status == 3||order.status == 4"></image>
							<image :src="$BASE_URL+picList[5]" mode="aspectFill" style="width: 160rpx;height: 160rpx;"
								v-if="order.status == 1"></image>
						</view>
					</view>
					<view class="order-bottom">
						<view class="all-msg u-flex font-OPPOSANS">
							<!-- 优惠： -->
							<!-- <text class="all-unit">￥</text> -->
							<!-- {{ order.discount_fee }} ，运费： -->
							<!-- <text class="all-unit">￥</text> -->
							<!-- {{ order.dispatch_amount }} ， -->
							<!-- {{ order.status <= 0 ? '需付款' : '实付款' }}： -->
							总租金：
							<view class="all-money font-OPPOSANS">{{ order.total_fee }}</view>
							<text style="margin-left: 20rpx;" v-if="order.stages">共{{order.stages.length||''}}期</text>



						</view>
						<view class="collapse-box" @click.stop=""
							v-if="order.status ==2 &&order.stages||order.status == 3&&order.stages||order.status == 4&&order.stages||order.status == 5&&order.stages">
							<u-collapse>
								<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index"
									:open='item.open' @change='item.change = !item.change'>
									<template slot="title-all">
										<view class="title-all">
											<view>分期账单详情</view>
											<view class="">
												<image :src="$BASE_URL + picList[7]" mode="aspectFill"
													style="height: 10rpx;width: 20rpx;" v-if="item.change">
													<image :src="$BASE_URL + picList[6]" mode="aspectFill"
														style="height: 10rpx;width: 20rpx;" v-if="!item.change">
											</view>
										</view>
									</template>
									<!-- {{item.body}} -->
									<view class="byStages">
										<view class="byStages-item" @click.stop="selectstages(stage)"
											v-for="(stage,index) in order.stages" :key="stage.id">
											<view class="byStages-item-left">
												<image :src="$BASE_URL + picList[0]" mode="aspectFill"
													style="height: 40rpx;width: 40rpx;"
													v-if="selectList.includes(stage.id) &&stage.order_status == 1">
												</image>
												<image :src="$BASE_URL + picList[8]" mode="aspectFill"
													style="height: 40rpx;width: 40rpx;"
													v-if='!selectList.includes(stage.id) &&stage.order_status == 1'>
												</image>
												<image :src="$BASE_URL + picList[3]" mode="aspectFill"
													style="height: 40rpx;width: 40rpx;" v-if='stage.order_status == 2'>
												</image>
												<text>{{stage.number}}/{{stage.end_number}}期</text>
												<image :src="$BASE_URL + picList[2]" mode="aspectFill"
													style="height: 24rpx;width: 24rpx;"></image>
												<text>{{stage.pedding_money}}元</text>
											</view>
											<view class="byStages-item-right">
												{{stage.order_status ==2 ?'已结清':stage.day}}
											</view>
										</view>
									</view>

									<view class="payMoney" @click="payMoney(order.order_sn)">
										支付租金
									</view>
								</u-collapse-item>
							</u-collapse>
						</view>



						<!-- 按钮 -->
						<!-- 	<view class="btn-box u-flex" v-if="order.btns.length">
							<block v-for="orderBtn in order.btns" :key="orderBtn">
								<button v-if="orderBtn === 'cancel'" @tap.stop="onCancel(order.id, orderIndex)"
									class="u-reset-button obtn1">取消订单</button>
								<button v-if="orderBtn === 'pay'" @tap.stop="onPay(order.id)"
									class="u-reset-button obtn2">立即支付</button>
								<button v-if="orderBtn === 'groupon'"
									@tap.stop="jump('/pages/activity/groupon/detail', { id: order.ext_arr.groupon_id })"
									class="u-reset-button obtn2">
									拼团详情
								</button>
								<button v-if="orderBtn === 'delete'" @tap.stop="onDelete(order.id, orderIndex)"
									class="u-reset-button obtn3">删除</button>
								<button v-if="orderBtn === 'express'" @tap.stop="onExpress(order.id, orderIndex)"
									class="u-reset-button obtn1">查看物流</button>
							</block>
						</view> -->
					</view>
				</view>

				<!-- 空白页 -->
				<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_groupon.png'"
					tipText="暂无商品，还有更多好货等着你噢~"></shopro-empty>
				<!-- 更多 -->
				<u-loadmore v-show="orderList.length" height="80rpx" :status="loadStatus" icon-type="flower"
					color="#ccc" />
			</scroll-view>
		</view>


		<u-popup v-model="payTypeShow" mode='bottom' border-radius="14">

			<view class="orderContract">
				<view class="" style="margin-top: 20rpx;">
					<view class="" style="font-size: 34rpx;text-align: center;">
						应付租金
					</view>
					<view class=""
						style="margin: 20rpx 0;text-align: center;color: #FF4747;font-size: 36rpx;font-weight: 600;">
						￥{{shouldpayMoney}}元
					</view>

					<view class="" style="display: flex;justify-content: center;margin-top: 40rpx;">
						<image v-if="QRbtn== ''" src="../../static/images/defaultQR.png" mode=""
							style="width: 400rpx;height: 400rpx;">
						</image>
						<!-- 微信支付 -->
						<image v-if="QRbtn == 2" :src="$BASE_URL + payQr[0]" mode=""
							style="width: 400rpx;height: 400rpx;">
						</image>
						<!-- 支付宝支付 -->
						<image v-if="QRbtn  == 1" :src="$BASE_URL + payQr[1]" mode=""
							style="width: 400rpx;height: 400rpx;">
						</image>
					</view>

					<view class="selectBtn">

						<!-- 	<view class="" v-if="QRbtn==''">
							请选择支付您的方式获取支付二维码
						</view> -->
						<view class="alipayQR QRbtn"
							:style="{backgroundColor:QRbtn==1? '#1678FF':'#F9F9F9',color:QRbtn ==1? '#fff':'#666'}"
							@click="selectBtn(1)">
							<view class="notselected" v-if="QRbtn != 1">

							</view>

							<image v-if="QRbtn == 1" src="../../imgs/pay/activeIcon.png" mode=""
								style="width: 40rpx;height: 40rpx;">
							</image>

							<image v-if="QRbtn == 1" src="../../imgs/pay/alipayActive.png" mode=""
								style="width: 36rpx;height: 36rpx;">
							</image>

							<image v-if="QRbtn != 1" src="../../imgs/pay/alipayIcon.png" mode=""
								style="width: 36rpx;height: 36rpx;">
							</image>
							<view>支付宝支付</view>
						</view>
						<view class="wechatQR QRbtn"
							:style="{backgroundColor:QRbtn==2? '#15ba11':'#F9F9F9',color:QRbtn ==2? '#fff':'#666'}"
							@click="selectBtn(2)">
							<!-- 没有选中 显示 -->
							<view class="notselected" v-if="QRbtn != 2">

							</view>
							<!-- 选中之后显示 -->
							<image v-if="QRbtn == 2" src="../../imgs/pay/activeIcon.png" mode=""
								style="width: 40rpx;height: 40rpx;">
							</image>
							<image v-if="QRbtn == 2" src="../../imgs/pay/weChatActive.png" mode=""
								style="width: 40rpx;height: 32rpx;">
							</image>
							<image v-if="QRbtn != 2" src="../../imgs/pay/weChatIcon.png" mode=""
								style="width: 40rpx;height: 32rpx;">
							</image>




							<view>微信支付</view>
						</view>
					</view>

				</view>

				<view class="tips" v-if="QRbtn ==1">
					截图保存并打开支付宝支付
				</view>
				<view class="tips" v-if="QRbtn == 2">
					截图保存并打开微信支付
				</view>
				<!-- <view class="wechatbtn" @click="paytype(1)">微信支付</view> -->
				<view v-if="QRbtn == 1" class="alipaybtn" @click="paytype(2)">打开支付宝</view>
				<view v-if="QRbtn == 2" class="wechatbtn" @click="paytype(1)">打开微信</view>
			</view>
		</u-popup>

		<u-popup v-model="tipsShow" mode='center' border-radius="14">
			<view class="toPayTips">
				<view class=""
					style="font-size: 36rpx;color: #333;font-weight: 500;text-align: center;margin-bottom: 40rpx;">
					温馨提醒
				</view>
				<view class="" style="font-size: 28rpx;color: #999;line-height: 28rpx;text-align: center;">
					如已截图请打开{{openPaytype == 2 ?"支付宝":'微信'}}扫码进行付款操作
					若没截图请返回截图后继续操作
				</view>
				<view class="" style="display: flex;justify-content: space-between;margin-top: 60rpx;">
					<view class="returnBtn" @click="tipsShow= false">
						返回截图
					</view>
					<view class="openBtn" @click='openAliorWechat()'
						:style="{backgroundColor: openPaytype == 2 ?'#1677ff':'#07c160'}">
						{{openPaytype == 2 ?"打开支付宝":'打开微信'}}
					</view>
				</view>
			</view>
		</u-popup>
		<view v-if="toPayShow">
			<web-view :webview-styles="webviewStyles" :src="toPay"></web-view>
		</view>
	</view>
</template>

<script>
	// import '../../shopro/pay/wxpay.js'
	export default {
		components: {},
		data() {
			return {
				payQr: [],
				openPaytype: '',
				tipsShow: false,
				QRbtn: '',
				toPay: '',
				toPayShow: false,
				mask: true,
				itemList: [{
					head: "分期账单详情",
					body: "",
					open: true,
					disabled: true,
					change: true
				}],
				stagelist: [{
					id: 1,
					start: 1,
					end: 12,
					money: 1198.5,
					time: '2022/12/1'
				}],
				payTypeShow: false,
				isEmpty: false,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				orderType: 'all',
				orderList: [],
				orderState: [{
						id: 0,
						title: '全部',
						type: 'all'
					},
					// {
					// 	id: 1,
					// 	title: '待付款',
					// 	type: 'nopay'	
					// },
					{
						id: 1,
						title: '待审核',
						type: '-1'
					},
					{
						id: 6,
						title: '审核中',
						type: '0'
					},
					{
						id: 4,
						title: '审核通过',
						type: '2'
					},
					{
						id: 2,
						title: '待发货',
						type: '3'
					},
					{
						id: 3,
						title: '待收货',
						type: '4'
					},
					{
						id: 7,
						title: '租用中',
						type: '5'
					},
					{
						id: 5,
						title: '审核失败',
						type: '1'
					}, {
						id: 8,
						title: '寄回中',
						type: '8'
					}, {
						id: 20,
						title: '已完成',
						type: '20'
					}
				],
				picList: [], // 选择图标
				selectList: [], // 选中的数组
				timer: null,
				scrollLeft: 0,
				currentSn: "", // 当前的orderSn
				shouldpayMoney: 0, // 应付租金
			};
		},
		onLoad() {
			if (this.$Route.query.type) {
				this.orderType = this.$Route.query.type;
				if (this.$Route.query.type == 5) {
					this.scrollLeft = 500
				}
			}
		},
		onShow() {
			this.selectList = []
			this.orderList = [];
			this.currentPage = 1;
			this.lastPage = 1;
			
			this.getOrderList();
			this.payTypeShow = false
		},

		mounted() {

			this.getpic()
		
		},
		methods: {
		


			isWechat() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == "micromessenger") {
					return true;
				} else {
					return false;
				}
			},
			openAliorWechat() {

				if (this.openPaytype == 1) {
					window.location.href = "weixin://";
					// var ua = navigator.userAgent.toLowerCase();
					// if (ua.match(/MicroMessenger/i) == "micromessenger") {
					// 	window.location.href = "weixin://";
					// } else {
					// 	alert("请先安装微信！");
					// }



				}
				if (this.openPaytype == 2) {
					window.location.href = 'alipays://'
					// uni.showLoading({
					// 	title: '加载中'
					// })
					// this.$http('order.setStage', {
					// 	order_sn: this.currentSn,
					// 	check_stage: this.selectList.join(','),
					// 	canal: "app",
					// 	mold: "alipay_wap"
					// }).then(res => {
					// 	console.log(res, 'res');
					// 	if (res.code == 1) {
					// 		// #ifdef H5
					// 		window.location.href = res.data.order.data.expend.pay_info
					// 		//  #endif
					// 		// #ifdef APP-PLUS
					// 		// plus.runtime.openURL(res.data.order.data.expend.pay_info)
					// 		this.toPay = res.data.order.data.expend.pay_info
					// 		this.toPayShow = true

					// 		// #endif
					// 	} else {

					// 	}
					// 	uni.hideLoading()
					// })

				}

			},
			// 选择点击的按钮
			selectBtn(i) {
				this.QRbtn = i


			},
			paytype(num) {

				this.openPaytype = num

				this.tipsShow = true





			},
			changeOpen(item) {
				console.log(item);
				// item.change = !item.change
			},
			payMoney(sn) {

				this.payMoney2(sn)
				// this.$u.debounce();
				// if(this.timer){ 
				// 	clearTimeout(this.timer) 

				// 	}
				// this.timer = setTimeout(()=>{

				// 			 clearTimeout(this.timer)
				// 	},1000)

			},
			// 支付租金
			payMoney2(sn) {


				uni.showLoading({
					title: '加载中'
				})
				this.$http('order.setStage', {
					order_sn: sn,
					check_stage: this.selectList.join(',')
				}).then(res => {
					console.log(res);

					if (res.code == 1) {
						uni.hideLoading()
						// #ifdef MP-ALIPAY
						my.tradePay({
							// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
							tradeNO: res.data.order.data.trade_no,
							success: (res) => {
								// if (this.orderType == 2) {
								// 	this.onNav(3)
								// 	return false
								// }
								this.selectList = []
								uni.hideLoading()
								this.orderList = [];
								this.currentPage = 1;
								this.lastPage = 1;
								this.getOrderList();

							},
							fail: (res) => {
								uni.hideLoading()
							}
						});


						// #endif

						//  #ifdef APP-PLUS || H5

						if (this.isWechat()) {
							// 微信环境
							let payinfo = {
								partnerid: '1649453056',
								...res.data.order.data
							}
							// // console.log(payinfo);



							WeixinJSBridge.invoke('getBrandWCPayRequest', {
									"appId": payinfo.appId, //公众号ID，由商户传入
									"timeStamp": payinfo.timeStamp.toString(), //时间戳，自1970年以来的秒数
									"nonceStr": payinfo.nonceStr, //随机串
									"package": payinfo.package,
									"signType": payinfo.signType, //微信签名方式：
									"paySign": payinfo.paySign, //微信签名
								},
								(res) => {
									// 支付成功
									if (res.err_msg == "get_brand_wcpay_request:ok") {
										// 使用以上方式判断前端返回,微信团队郑重提示：
										//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。

										this.selectList = []
										uni.hideLoading()
										this.orderList = [];
										this.currentPage = 1;
										this.lastPage = 1;
										this.getOrderList();


									}
									// 支付过程中用户取消
									if (res.err_msg == "get_brand_wcpay_request:cancel") {

									}
									// 支付失败
									if (res.err_msg == "get_brand_wcpay_request:fail") {

									}
								});


						} else {
							// 其他环境
							if (this.selectList.length == 0) {

								return uni.showToast({
									title: '请选择要支付的账单分期',
									icon: 'none'
								})
							}
							this.currentSn = sn
							// this.payTypeShow = true

							window.location.href = res.data.order.data.expend.pay_info
						}
						// console.log();

						//  #endif



					} else {
						uni.hideLoading()
					}
				})


			},
			// 
			selectstages(stage) {
				console.log('选择分期', stage);

				if (stage.order_status == 2) return
				if (this.selectList.includes(stage.id)) {
					this.selectList.splice(this.selectList.indexOf(stage.id), 1)
					this.shouldpayMoney -= parseFloat(stage.pedding_money)
				} else {
					this.shouldpayMoney += parseFloat(stage.pedding_money)
					this.selectList.push(stage.id)
				}




			},

			getpic() {
				this.$http('common.getPic', {}).then(res => {
					if (res.code === 1) {
						console.log(res);
						this.picList = res.data.result.selectIcon
						this.payQr = res.data.result.payQR
					}
				});
			},



			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},

			// tab切换
			onNav(id) {

				if (this.mask) return false
				if (this.orderType !== id) {
					this.orderType = id;
					this.orderList = [];
					this.currentPage = 1;
					this.lastPage = 1;
					this.getOrderList();
				}
			},

			// 订单列表
			getOrderList() {


				let that = this;
		
				that.mask = true
				that.loadStatus = 'loading';
				that.$http('order.index', {
					type: that.orderType,
					page: that.currentPage
				}).then(res => {
					that.mask = false
					if (res.code === 1) {
						that.orderList = [...that.orderList, ...res.data.data];
						that.isEmpty = !that.orderList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}

				});
			},

			// 加载更多
			loadMore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getOrderList();
				}
			},

			// 删除订单
			onDelete(orderId, orderIndex) {
				let that = this;
				uni.showModal({
					title: '删除订单',
					content: '确定要删除这个订单么？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							that.$http('order.deleteOrder', {
									id: orderId
								},
								'删除中...'
							).then(res => {
								if (res.code === 1) {
									that.$u.toast(res.msg);
									that.orderList.splice(orderIndex, 1);
								}
							});
						}
					}
				});
			},

			// 取消订单
			onCancel(id, orderIndex) {
				let that = this;
				that.$http('order.cancel', {
						id: id
					},
					'取消中...'
				).then(res => {
					if (res.code === 1) {
						that.$u.toast(res.msg);
						this.orderList.splice(orderIndex, 1);
					}
				});
			},

			// 立即购买
			onPay(id) {
				uni.navigateTo({
					url: `/pages/order/payment/method?orderId=${id}&orderType=goods`
				});
			},

			// 查看物流
			onExpress(orderId) {
				let that = this;
				that.$http('order.expressList', {
					order_id: orderId
				}).then(res => {
					if (res.code === 1) {
						if (res.data.length == 1) {
							this.jump('/pages/order/express/express-detail', {
								orderId: orderId,
								expressId: res
									.data[0].id
							});
						} else if (res.data.length > 1) {
							this.jump('/pages/order/express/express-list', {
								orderId: orderId
							});
						} else {
							that.$u.toast('暂无包裹~');
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.mask-loading {
		// margin-top: 200rpx;
		z-index: 999;
		position: absolute;
		left: 50%;
		top: 30%;
		transform: translateX(-50%);
		width: 200rpx;
		height: 200rpx;
		background-color: #333;
		opacity: 0.8;
		border-radius: 10rpx;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.toPayTips {
		width: 600rpx;
		// height: 460rpx;
		border-radius: 20rpx;
		// opacity: 1;

		background: #FFFFFF;
		box-sizing: border-box;
		padding: 48rpx;

		.returnBtn {
			width: 212rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 8rpx;
			opacity: 1;
			text-align: center;
			box-sizing: border-box;
			border: 2rpx solid #EBEBEB;
		}

		.openBtn {
			width: 212rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 8rpx;
			opacity: 1;
			text-align: center;
			box-sizing: border-box;
			border: 2rpx solid #EBEBEB;
			background-color: #3662EC;
			color: #fff;
		}

		.returnBtn:active {
			background-color: #f7f7f7;
		}

		.openBtn:active {
			// background-color: #3a6bff;
		}
	}

	.selectBtn {
		display: flex;
		justify-content: space-between;
		margin-top: 138rpx;

		.QRbtn {
			color: #666;
			width: 312rpx;
			height: 88rpx;
			border-radius: 120rpx;
			background: #F9F9F9;
			display: flex;
			align-items: center;
			justify-content: space-around;
			box-sizing: border-box;
			padding: 0 20rpx;
		}

		.notselected {
			width: 40rpx;
			height: 40rpx;
			border-radius: 20rpx;
			border: 1rpx solid #CCCCCC;

		}

	}

	.orderContract {

		width: 100%;
		height: 1140rpx;
		padding: 46rpx;
		background-color: #fff;
		border-radius: 20rpx !important;


		.wechatbtn {

			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border: 2rpx solid #15ba11;

			margin-bottom: 20rpx;
			text-align: center;
			color: #fff;
			background-color: #15ba11;
			border-radius: 60rpx;
			margin-top: 70rpx;
		}

		.tips {
			position: absolute;
			top: 650rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 590rpx;
			height: 70rpx;
			border-radius: 40rpx;
			opacity: 1;
			color: #FF4747;
			text-align: center;
			line-height: 70rpx;
			background: rgba(255, 71, 71, 0.08);
		}

		.alipaybtn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border: 2rpx solid #1677ff;

			margin-bottom: 20rpx;
			text-align: center;
			color: #fff;
			background-color: #1677ff;
			border-radius: 60rpx;
			margin-top: 70rpx;
		}

		.wechatbtn:active {
			background-color: #07c160;
			color: #fff;

		}

		.alipaybtn:active {
			background-color: #1571f3;
			color: #fff;
		}

		.eBtn,
		.antBtn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border: 2rpx solid #fc6056;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			text-align: center;
			color: #fc6056;
		}

		// .wechatbtn {
		// 	width: 100%;
		// 	height: 80rpx;
		// 	line-height: 80rpx;
		// 	border: 2rpx solid #07c160;
		// 	border-radius: 10rpx;
		// 	margin-bottom: 20rpx;
		// 	text-align: center;
		// 	color: #07c160;
		// }

		// .alipaybtn {
		// 	width: 100%;
		// 	height: 80rpx;
		// 	line-height: 80rpx;
		// 	border: 2rpx solid #1677ff;
		// 	border-radius: 10rpx;
		// 	margin-bottom: 20rpx;
		// 	text-align: center;
		// 	color: #1677ff;
		// }

		.eBtn:active {
			background-color: gainsboro;

		}

		.antBtn:active {
			color: #fff;
			background-color: #fc6056;
		}
	}

	.order-nav {
		background: #fff;
		height: 80rpx;

		.scroll {
			white-space: nowrap;
			width: 100%;

		}

		.nav-item {
			width: 150rpx;
			display: inline-block;
			// width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 36rpx;

			.item-title {
				font-size: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 76rpx;
			}

			.nav-line {
				width: 100rpx;
				height: 4rpx;
				background: #fff;
			}

			.line-active {
				width: 100rpx;
				height: 4rpx;
				background: #FF4747;
			}

			.fontweight {
				font-weight: 800;
			}
		}
	}

	.order-list {
		width: 710rpx;
		background: #fff;
		margin: 20rpx auto;
		border-radius: 20rpx;

		.order-bottom {
			padding-bottom: 20rpx;

			.collapse-box {
				box-sizing: border-box;
				padding: 0 30rpx;

				// /deep/ .u-collapse-body {
				// 	height: 100%;
				// }
				.title-all {
					width: 630rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.byStages {
					width: 100%;
					// height: 300rpx;
					background-color: #FAFAFA;
					border-radius: 20rpx;
					padding: 20rpx 0;

					.byStages-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 20rpx 0;
						// margin-bottom: 20rpx;
					}

					.byStages-item-left {
						color: #333;
						display: flex;
						align-items: center;
						justify-content: space-around;
						width: 60%;
					}

					.byStages-item-right {
						width: 30%;
					}
				}

				.payMoney {
					margin: 0 auto;
					margin-top: 30rpx;
					width: 80%;
					border-radius: 44rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #FF4747;
					font-size: 32rpx;
					font-weight: 500;
					border: 2rpx solid #FF4747;
				}

				.payMoney:active {
					background-color: #FF4747;
					color: #FAFAFA;
				}
			}

			.btn-box {
				justify-content: flex-end;
			}

			.all-msg {
				font-size: 24rpx;
				color: #999;
				justify-content: flex-end;
				margin-bottom: 10rpx;
				padding: 0 30rpx;

				.all-unit {
					font-size: 20rpx;
				}

				.all-money {
					font-size: 26rpx;
					color: #333;
					font-weight: 500;

					&::before {
						content: '￥';
						font-size: 20rpx;
					}
				}
			}

			.obtn1 {
				width: 160rpx;
				line-height: 60rpx;
				background: rgba(238, 238, 238, 1);
				border-radius: 30rpx;
				font-size: 26rpx;

				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
				padding: 0;
			}

			.obtn2 {
				width: 160rpx;
				line-height: 60rpx;
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 30rpx;
				margin-right: 20rpx;
				font-size: 26rpx;

				font-weight: 400;
				color: #fff;
				padding: 0;
			}

			.obtn3 {
				background: #ffeeee;
				color: #e50808;
				width: 160rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				margin-right: 20rpx;
				font-size: 26rpx;
				font-weight: 400;
				padding: 0;
			}
		}

		.order-head {
			padding: 0 25rpx;
			height: 77rpx;
			border-bottom: 1rpx solid #dfdfdf;

			.no {
				font-size: 26rpx;
				color: #999;
			}

			.state {
				font-size: 26rpx;
				color: #a8700d;
			}
		}

		.goods-order {
			border-bottom: 1px solid rgba(223, 223, 223, 0.5);
			padding: 20rpx 20rpx 0;
			margin-bottom: 20rpx;
			position: relative;

			.pass {
				position: absolute;
				right: 30rpx;
				top: 30rpx;

				image {
					transform: rotate(-25deg);
				}
			}

			.order-content {
				padding-bottom: 20rpx;

				.order-sku {
					font-size: 24rpx;

					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					width: 450rpx;
					margin-bottom: 20rpx;

					.order-num {
						margin-right: 10rpx;
					}
				}

				.order-price-box {
					.status-btn {
						height: 32rpx;
						border: 1rpx solid rgba(207, 169, 114, 1);
						border-radius: 15rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(168, 112, 13, 1);
						padding: 0 10rpx;
						margin-left: 20rpx;
						background: rgba(233, 183, 102, 0.16);
					}

					.order-price {
						font-size: 26rpx;

						font-weight: 600;
						color: rgba(51, 51, 51, 1);
					}
				}
			}
		}
	}
</style>
